const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 模式
  mode: 'development',

  // 入口  多个
  entry: {
    base: './src/base.js',
    login: './src/pages/login/index.js',
    userAdd: './src/pages/userAdd/index.js',
    users: './src/pages/users/index.js',
    userUpdate: './src/pages/userUpdate/index.js',
  },

  // 输出
  output: {
    path: path.resolve(__dirname, 'dist'), // 所有打包文件所在的根目录
    filename: 'js/[name]_[contenthash:8].js', // 打包生成的js文件 (可以带目录)
    clean: true, // 打包时, 先自动清除打包文件夹
  },

  // 打包多个页面的多个plugin
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/pages/login/index.html",// 指定模板文件。
      filename: 'login.html',// 生成的打包页面文件名
      chunks: ['base', 'login'], // 引入的js包名
      inject: "body",// 将打包生成的JS文件放置在body尾部
    }),
    new HtmlWebpackPlugin({
      template: "./src/pages/userAdd/index.html",
      filename: 'userAdd.html',
      chunks: ['base', 'userAdd'],
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "./src/pages/users/index.html",
      filename: 'users.html',
      chunks: ['base', 'users'],
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "./src/pages/userUpdate/index.html",
      filename: 'userUpdate.html',
      chunks: ['base', 'userUpdate'],
      inject: "body",
    }),
    new HtmlWebpackPlugin({
      template: "./src/pages/index/index.html",
      filename: 'index.html',
      chunks: []
    }),
  ],

  // 配置 loader
  module: {
    rules: [
      // 处理JS文件 ES6 => ES5
      {
        test: /\.js$/,
        exclude: /node_modules/, // 不进行处理的文件夹
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                  corejs: { version: 2 } // 指定core-js的版本号为2
                }
              ]
            ],
            plugins: [], // 指定babel插件包
          }
        }
      },

      // 处理art文件
      {
        test: /\.art$/,
        loader: "art-template-loader",
      },

      // 处理css文件
      {
        test: /\.css$/,  // 配置css文件的正则
        // 1. 每个loader就是一个处理函数
        // 2. 多个loader, 从下向上依次执行
        use: [
          'style-loader', // js文件 => 页面的style标签
          'css-loader'  // css文件 => js文件
        ]
      },
    ]
  },

  // 开发服务器
  devServer: {
    port: 3000, // 端口号
    open: true, // 自动打开浏览器
  }
}